.particle:nth-child(8) { left: 80%; width: 5px; height: 5px; animation-delay: 3s; animation-duration: 15s; }
.hero-content::after {
content: '';
position: absolute;
top: -40px;
left: -40px;
right: -40px;
bottom: -40px;
border: 1px solid rgba(212, 165, 116, 0.1);
border-radius: 30px;
animation: pulse 4s ease-in-out infinite 0.5s;
}
.vine-right {
position: absolute;
top: 10%;
right: 5%;
width: 200px;
height: 400px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400"><path d="M20,0 Q50,50 40,100 T60,200 Q80,250 70,300 T80,400" stroke="%23D4A574" stroke-width="2" fill="none" opacity="0.3"/><circle cx="40" cy="80" r="8" fill="%23D4A574" opacity="0.2"/><circle cx="60" cy="180" r="6" fill="%23D4A574" opacity="0.2"/><circle cx="70" cy="280" r="7" fill="%23D4A574" opacity="0.2"/><path d="M40,80 Q60,70 70,85" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/><path d="M60,180 Q80,170 90,185" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/></svg>');
background-repeat: no-repeat;
animation: swayRight 8s ease-in-out infinite;
}
.cta-button:hover::before {
width: 300px;
height: 300px;
}
.cta-button {
display: inline-block;
padding: 18px 45px;
background: linear-gradient(135deg, var(--accent) 0%, var(--wine) 100%);
color: var(--light);
text-decoration: none;
font-size: 18px;
letter-spacing: 2px;
border-radius: 50px;
transition: all 0.4s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
animation: pulse 2s infinite;
position: relative;
overflow: hidden;
}
.particle:nth-child(2) { left: 20%; width: 4px; height: 4px; animation-delay: 2s; animation-duration: 15s; }
.barn-silhouette {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 60%;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 600"><path d="M700,400 L700,200 L960,50 L1220,200 L1220,400 L1100,400 L1100,250 L960,150 L820,250 L820,400 Z" fill="%23000000" opacity="0.3"/><rect x="850" y="300" width="60" height="100" fill="%23D4A574" opacity="0.4"/><rect x="1010" y="300" width="60" height="100" fill="%23D4A574" opacity="0.4"/><path d="M0,600 Q200,500 400,550 T800,500 Q1000,450 1200,500 T1600,450 Q1760,400 1920,500 L1920,600 Z" fill="%231a1410" opacity="0.8"/></svg>');
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.6;
}
.particle:nth-child(3) { left: 30%; width: 8px; height: 8px; animation-delay: 4s; animation-duration: 18s; }
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.hero-image-layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #2C1810 0%, #8B7355 50%, #D4A574 100%);
opacity: 0.6;
animation: slowZoom 20s ease-in-out infinite alternate;
}
.decorative-frame {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 5;
}
.particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.particle:nth-child(9) { left: 90%; width: 8px; height: 8px; animation-delay: 5s; animation-duration: 14s; }
.particle:nth-child(1) { left: 10%; width: 6px; height: 6px; animation-delay: 0s; animation-duration: 12s; }
.cta-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
transition: all 0.5s ease;
transform: translate(-50%, -50%);
}
.hero-description {
font-size: 24px;
font-style: italic;
margin-bottom: 50px;
opacity: 0.95;
animation: fadeIn 2s ease 0.8s both;
color: rgba(250, 247, 243, 0.9);
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.hero-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><defs><pattern id="vines" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"><path d="M50,0 Q100,50 50,100 T50,200" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/><circle cx="50" cy="50" r="3" fill="%23D4A574" opacity="0.3"/><circle cx="50" cy="150" r="3" fill="%23D4A574" opacity="0.3"/></pattern></defs><rect width="1920" height="1080" fill="url(%23vines)"/><path d="M0,800 Q480,700 960,800 T1920,800 L1920,1080 L0,1080 Z" fill="%232C1810" opacity="0.5"/></svg>');
background-size: cover;
animation: float 15s ease-in-out infinite;
}
.hero-subtitle {
font-size: 18px;
letter-spacing: 6px;
margin-bottom: 20px;
opacity: 0.9;
animation: fadeIn 2s ease 0.5s both;
position: relative;
display: inline-block;
padding: 0 60px;
}
.hero-subtitle::after {
right: 0;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(212,165,116,0.4);
}
.hero-subtitle::before {
left: 0;
}
.hero {
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #1a1410;
overflow: hidden;
}
.particle {
position: absolute;
background: radial-gradient(circle, rgba(212, 165, 116, 0.8) 0%, transparent 70%);
border-radius: 50%;
animation: floatUp 15s linear infinite;
}
.hero-content {
text-align: center;
color: var(--light);
z-index: 10;
position: relative;
animation: slideUp 1.5s ease;
padding: 40px;
background: radial-gradient(circle at center, rgba(44, 24, 16, 0.4) 0%, transparent 70%);
border-radius: 20px;
backdrop-filter: blur(5px);
}
.light-rays {
position: absolute;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
background: conic-gradient(from 0deg at 50% 50%,
transparent 0deg,
rgba(212, 165, 116, 0.1) 10deg,
transparent 20deg,
transparent 40deg,
rgba(212, 165, 116, 0.1) 50deg,
transparent 60deg,
transparent 80deg,
rgba(212, 165, 116, 0.1) 90deg,
transparent 100deg,
transparent 120deg,
rgba(212, 165, 116, 0.1) 130deg,
transparent 140deg,
transparent 360deg
);
animation: rotate 60s linear infinite;
opacity: 0.5;
}
.hero-title {
font-size: 82px;
font-weight: bold;
margin-bottom: 30px;
text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
letter-spacing: 3px;
animation: slideUp 1.5s ease 0.3s both;
background: linear-gradient(180deg, var(--light) 0%, rgba(212, 165, 116, 0.9) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
.hero-title { font-size: 48px; }
.particle:nth-child(5) { left: 50%; width: 7px; height: 7px; animation-delay: 8s; animation-duration: 16s; }
.particle:nth-child(6) { left: 60%; width: 4px; height: 4px; animation-delay: 10s; animation-duration: 13s; }
.hero-content::before {
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
border: 2px solid rgba(212, 165, 116, 0.3);
border-radius: 25px;
animation: pulse 4s ease-in-out infinite;
}
.particle:nth-child(4) { left: 40%; width: 5px; height: 5px; animation-delay: 6s; animation-duration: 14s; }
.vine-left {
position: absolute;
top: 10%;
left: 5%;
width: 200px;
height: 400px;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 400"><path d="M180,0 Q150,50 160,100 T140,200 Q120,250 130,300 T120,400" stroke="%23D4A574" stroke-width="2" fill="none" opacity="0.3"/><circle cx="160" cy="80" r="8" fill="%23D4A574" opacity="0.2"/><circle cx="140" cy="180" r="6" fill="%23D4A574" opacity="0.2"/><circle cx="130" cy="280" r="7" fill="%23D4A574" opacity="0.2"/><path d="M160,80 Q140,70 130,85" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/><path d="M140,180 Q120,170 110,185" stroke="%23D4A574" stroke-width="1" fill="none" opacity="0.2"/></svg>');
background-repeat: no-repeat;
animation: swayLeft 8s ease-in-out infinite;
}
.hero-subtitle::before,
.hero-subtitle::after {
content: '❦';
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--accent);
font-size: 24px;
animation: pulse 2s ease-in-out infinite;
}
.particle:nth-child(7) { left: 70%; width: 6px; height: 6px; animation-delay: 1s; animation-duration: 17s; }